<template>
  <div class="select-hospital" v-show="rightPopup">
    <div class="hospital-list">
      <ul class="bgwhite">
        <li
          v-for="(item, index) in lists"
          :key="index"
          class="pd10 hospital-item"
          @click="selectHospital(item)"
        >
          <mu-flexbox grow="2">
            <mu-flexbox-item>
              <div class="hos-img mr10">
                <img v-lazy="item.picurl" width="80" height="60"/>
              </div>
            </mu-flexbox-item>
            <mu-flexbox-item grow="3">
              <div class="flex flex-col">
                <div class="text-bigger maxLen mb5">{{item.title}}</div>
                <div class="maxLen mb5">
                  <i class="w-icon w-icon-yyjs_dhkb inline-block v-middle" />
                  <span class="text-small color-info">{{item.address}}</span>
                </div>
                <div>
                  <i class="w-icon w-icon-yyjs_dz inline-block v-middle" />
                  <span class="text-small color-info">{{item.telephone}}</span>
                </div>
              </div>
            </mu-flexbox-item>
          </mu-flexbox>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { commonAjaxJson, RESTFUL_API } from "@/api/api";
export default {
  data() {
    return {
      rightPopup: true,
      lists: []
    };
  },
  // props: {
  //   lists: {
  //     type: Array,
  //     // default: () => {
  //     //   return [];
  //     // }
  //   }
  // },
  mounted() {
    this.getHosptialInfo();
  },
  methods: {
    getHosptialInfo() {
      
      commonAjaxJson(`${RESTFUL_API.getHosptialInfo}`)
        .then(res => {
          
          if (res.data.code == 200 && res.data.data) {
            if(Array.isArray(res.data.data.hosptialInfo)) {
              this.lists = res.data.data.hosptialInfo;
            } else {
              this.lists.push(res.data.data.hosptialInfo);
            }
          } else {
            this.$store.commit("UPDATE_TOAST", {
              message: res.data.message
            });
          }
        })
        .catch(res => {
          
          this.$store.commit("UPDATE_TOAST", {
            message: res
          });
        });
    },
    selectHospital(item) {
      sessionStorage.selectedHospital = JSON.stringify(item);
      this.$emit("selectHospital", item);
      this.rightPopup = false;
    }
  }
};
</script>

<style lang="less" scoped>
.select-hospital {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  overflow-y: scroll;
  .hospital-list {
    min-height: 100vh;
    background: #f2f2f2;
    > ul {
      padding: 0 15px;
    }
    .hospital-item {
      height: 90px;
      font-size: 12px;
      border-bottom: 1px solid #eaeaea;
      span {
        vertical-align: middle;
      }
      .hos-img {
        img {
          border-radius: 5px;
        }
      }
    }
  }
}
.mb5 {margin-bottom: 5px;}
.text-bigger {font-size: 16px; font-weight: bold;}
.maxLen {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>